<template>
	<view class="content" >
		<view v-if="barshow" class="bar" :style="{height:topheight}"></view>
		<view class="top" :style="{ paddingTop:topheight}">
			<view class="top_title">
				<image src="@/static/img/home_title2.png" mode="widthFix"></image>
				<text>小额贷款平台</text>
			</view>
			<view class="top_info">
				<view class="t_i_title">极速贷款，花钱不愁</view>
				<view class="t_i_yuan">最高贷款额度(元)</view>
				<view class="t_i_money">{{money}}</view>
				<view class="t_i_nian">年利率（单利）最低4%，1000元借一天只需0.11元</view>
				<view class="t_i_btn" @click="apply">立即申请</view>
			</view>
			<view class="top_more">更多贷款产品</view>
		</view>
		<view class="items" v-for="(item,i) in list">
			<image :src="imagelist[i%2]" class="skImg" mode="heightFix"></image>
			<view class="items_left">
				<view class="i_l_top">
					<image :src="item.icon" mode="widthFix"></image>
					<view>{{item.name}}</view>
					<text v-for="item2 in item.brief">{{item2}}</text>
				</view>
				<view class="i_l_down">
					<view class="i_l_d_item left">
						<view>适用人群</view>
						<view>{{item.applyto}}</view>
					</view>
					<view class="i_l_d_item">
						<view>贷款期限</view>
						<view>{{item.loan_term}}</view>
					</view>
				</view>
			</view>
			<view class="items_btn" @click="apply">立即申请</view>
		</view>
		<!-- <view :style="{ paddingTop: topheight,height:navheight,lineHeight:navheight }" class="nav">
			<view>链游之王</view>
		</view> -->
	</view>
</template>

<script>
	import {indexInfo} from '@/common/js/index.js'
	export default {
		data() {
			return {
				title: 'Hello',
				topheight: '',
				totalheight: '',
				navheight: '',
				imagelist:[
					require('@/static/img/home_bg3.png'),
					require('@/static/img/home_bg4.png')
				],
				barshow: false,
				description: '',
				list: '',
				money: '',
			}
		},
		onLoad() {
			const systemInfo = uni.getSystemInfoSync()
			const height = systemInfo.statusBarHeight;
			const navigationBarHeight = systemInfo.platform === 'android' ? 44 : 44 // 根据不同平台设置导航栏高度 
			const totalHeight = height + navigationBarHeight
			this.topheight = height + 'px';
			this.totalheight = totalHeight + 'px'
			this.navheight = navigationBarHeight + "px";
			uni.setStorageSync('topHeight', this.topheight);
			uni.setStorageSync('totalHeight', this.totalheight);
			uni.setStorageSync('navHeight', this.navheight);
		},
		onShow() {
			this.info()
		},
		methods: {
			audit() {
				uni.navigateTo({ url: '/pages/index/audit' })
			},
			apply() {
				uni.navigateTo({ url: '/pages/index/apply' })
			},
			info() {
				indexInfo().then(res=>{
					this.description = res.data.description
					this.list = res.data.list
					this.money = res.data.money
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 48) {
				this.barshow = true
			} else {
				this.barshow = false
			}
		},
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		position: relative;
		overflow: hidden;
	}
	.top {
		// width: 100%;
		// height: 908rpx;
		padding: 0 30rpx;
		background: url('../../static/img/home_bg.png') no-repeat;
		background-size: cover;
		overflow: hidden;
		.top_title {
			display: flex;
			align-items: center;
			margin: 32rpx 0 30rpx;
			image {
				width: 166rpx;
			}
			text {
				font-size: 24rpx;
				color: white;
				margin-left: 20rpx;
			}
		}
		.top_info {
			width: 690rpx;
			height: 590rpx;
			background: url('../../static/img/home_bg2.png') no-repeat;
			background-size: cover;
			text-align: center;
			overflow: hidden;
			.t_i_title {
				// line-height: 110rpx;
				margin-top: 44rpx;
				padding-left: 42rpx;
				font-size: 28rpx;
				font-size: 32rpx;
				color: #666666;
				text-align: left;
			}
			.t_i_yuan {
				font-weight: 700;
				font-size: 28rpx;
				margin: 70rpx 0 20rpx;
			}
			.t_i_money {
				font-weight: 700;
				font-size: 80rpx;
				line-height: 116rpx;
			}
			.t_i_nian {
				font-size: 24rpx;
				color: #999999;
				margin: 30rpx 0 52rpx;
			}
			.t_i_btn {
				width: 516rpx;
				height: 80rpx;
				line-height: 80rpx;
				background: linear-gradient( 270deg, #FF5F3B 0%, #FF524F 100%);
				border-radius: 40rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 auto;
			}
		}
		.top_more {
			font-weight: 500;
			font-size: 32rpx;
			margin-top: 40rpx;
			margin-bottom: 32rpx;
		}
	}
	.items {
		// width: 690rpx;
		height: 258rpx;
		margin: 0 30rpx 30rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		// align-items: center;
		.skImg {
			position: absolute;
			height:258rpx;
			left: 0;
			right: 0;
			z-index: 1;
		}
		.items_left {
			z-index: 2;
			.i_l_top {
				display: flex;
				align-items: center;
				margin: 30rpx 0;
				image {
					width: 48rpx;
				}
				view {
					font-weight: 500;
					font-size: 28rpx;
					margin: 0 20rpx 0 12rpx;
				}
				text {
					height: 32rpx;
					line-height: 32rpx;
					padding: 0 10rpx;
					background: #FFF3E4;
					border-radius: 4rpx;
					font-size: 20rpx;
					color: #E8A44D;
					margin-right: 12rpx;
				}
			}
			.i_l_down {
				display: flex;
				.left {
					width: 250rpx;
					margin-right: 50rpx;
				}
				.i_l_d_item {
					view {
						&:nth-of-type(1){
							font-size: 26rpx;
							color: #999999;
						}
						&:nth-of-type(2){
							font-weight: 500;
							// font-size: 40rpx;
							color: #3D3D3D;
							margin-top: 30rpx;
						}
					}
				}
			}
		}
		.items_btn {
			z-index: 2;
			width: 136rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: #FF524F;
			border-radius: 30rpx;
			font-size: 24rpx;
			color: #FFFFFF;
			margin: 102rpx 0 0 0;
		}
	}
	
	.bar {
		width: 100vw;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		animation: bg 0.8s 1 both linear;
		background-color: red;
	}
	
	@keyframes bg {
		0% {
			background-color: rgba(255, 90, 65, 0.1);
		}
	
		50% {
			background-color: rgba(255, 90, 65, 0.5);
		}
	
		100% {
			background-color: rgba(255, 90, 65, 1);
		}
	}
	.nav {
		width: 100vw;
		position: relative;
		/* background-color: #F8F8F8; */
		background-color: white;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 22;
	}
</style>
